<!--
 * @Descripttion: 补充资质图片
 * @version: 
 * @Author: 穆宏宇
 * @Date: 2020-11-19 09:59:20
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-19 16:24:51
-->
<template>
  <div class="common-add-img">
    <el-button type="primary" @click="addImgDialogShow = true"
      >补充资质图片</el-button
    >
    <el-dialog
      title="补充资质图片"
      :visible.sync="addImgDialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      width="600px"
      :before-close="addImgDialogClose"
    >
      <el-form ref="form" label-suffix=":" label-width="120px">
        <el-row>
          <el-col :span="24" v-for="item in dataList" :key="item.key">
            <el-form-item :label="item.name">
              <div v-if="item.id" class="set-flex align-item-center">
                <div>
                  <common-img
                    :fileType="item.fileType"
                    :id="item.id"
                    size="mini"
                  />
                </div>
                <div class="ml10">
                  <el-button size="mini" @click="removeImg(item)"
                    >移除</el-button
                  >
                  <span class="tips">( 移除后可重新上传 )</span>
                </div>
              </div>
              <el-upload
                v-else
                :action="fileUrl"
                :data="{ fileType: item.fileType }"
                :on-remove="(file, fileList) => handleRemove(file, fileList)"
                :on-success="
                  (res, file, fileList) =>
                    handleAvatarSuccess(res, file, fileList, item)
                "
                :on-error="handleAvatarError"
                :before-upload="beforeAvatarUpload"
                :headers="fileHeaders"
                :limit="1"
                :show-file-list="false"
                :on-exceed="handleExceed"
              >
                <div class="set-flex align-item-center">
                  <i
                    class="iconfont upload-icon"
                    :class="item.icon ? item.icon : 'iconziliao'"
                  ></i>
                  <span class="ml10">
                    <span class="danger" v-if="item.required">*</span>
                    (点击上传)
                  </span>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addImgDialogShow = false">关 闭</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { deleteFile } from '@/api/common.api'
import { purchaserAddAttachment, supplierAddAttachment } from '@/api/mall.api'

import fileUpdata from '@/api/file.config'
import commonImg from '@/views/admin/components/common-img'
import { beforeUpload } from '@/util/common'
export default {
  name: 'common-add-img',
  components: {
    commonImg,
  },
  data() {
    return {
      addImgDialogShow: false,
      fileHeaders: fileUpdata.headers(),
      fileUrl: fileUpdata.url,
    }
  },
  props: {
    options: {
      type: Object,
      default() {
        return {}
      },
    },
    dataList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  methods: {
    // 补充资质图片关闭事件
    addImgDialogClose(done) {
      done()
    },
    // 移除图片
    removeImg(item) {
      deleteFile(item.fileType, item.id)
      item.id = ''
    },
    // 删除附件
    handleRemove(file, fileList, isCardFront) {
      console.log('删除')
      if (file && file.status === 'success') {
        // deleteFile(file.response.data.fileType, file.response.data.id).then(
        //   (res) => {
        //   }
        // )
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多可上传 1 个附件，您已超限`)
    },
    handleAvatarSuccess(res, file, fileList, item) {
      item.id = res.data.id
    },
    handleAvatarError(res, file) {
      this.$message.error('文件上传失败，请重试')
    },
    beforeAvatarUpload(file) {
      //const isJPG = file.type === 'image/jpeg';
      const typeList = ['png', 'jpg', 'jpeg']
      const isJPG = beforeUpload(file, typeList)
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传文件格式不符合!')
      }
      if (!isLt5M) {
        this.$message.error('上传证图片大小不能超过 5MB!')
      }
      return isJPG && isLt5M
    },
    // 提交
    save() {
      let data = {
        userId: this.options.userId,
        orgId: this.options.orgId
      }
      for (let i = 0; i < this.dataList.length; i++) {
        const item = this.dataList[i]
        if (item.id) {
          data[item.key] = item.id
        } else {
          if (item.required) {
            return this.$alert(`请上传${item.name}`, '提示', {
              confirmButtonText: '确定',
              type: 'warning',
            })
          }
        }
      }
      let fn =this.options.type === 'purchaser'
          ? purchaserAddAttachment
          : supplierAddAttachment
      fn(data).then((res) => {
        this.$alert(`保存成功!`, '提示', {
            confirmButtonText: '确定',
            type: 'success',
            callback: action => {
              this.addImgDialogShow = false
              window.location.href = window.location.href
              }
          })
      })
    },
  },
}
</script>

<style scoped lang='scss'>
.common-add-img {
  .tips {
    margin: 0 10px;
    font-size: 12px;
    color: $--color-warning;
  }
  .ml10 {
    margin-left: 10px;
  }
  .upload-icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 70px;
  }
  .danger{
    color: red;
  }
}
</style>
